<template>
  <div class="yingmoo-store">
    <ul class="nav">
      <router-link tag="li" to="/ymMemberstore">媒体管理</router-link>
      <router-link tag="li" to="/ymMemberstorecombo">套餐管理</router-link>
      <router-link tag="li" to="/ymMembermysubmitactivity">我的活动</router-link>
      <router-link tag="li" to="/ymMembersubmitmycase">我的案例</router-link>
      <router-link tag="p" to="/ymMembersubmitmycase" class="uploading"><img src="../assets/ym-member/media/return.png" />返回</router-link>
    </ul>
    <div class="content">
      <h4>基本信息</h4>
      <div class="message">
        <div class="message-left">
          <p>案例标题</p>
          <p>客户名称</p>
          <p>作品描述</p>
          <p>媒体封面</p>
          <p>原创承诺</p>
        </div>
        <div class="message-right">
          <div class="input">
            <input id="title" v-model="cases.caseTitle" type="text" placeholder="请输入案例标题" /><span>{{warning.title}}</span>
          </div>
          <div class="input">
            <input v-model="cases.companyname" type="text" placeholder="" /><span>{{warning.name}}</span>
          </div>
          <div>
            <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
          </div>
          <div class="select">
            <div class="pic1">选择图片</div>
            <div class="pic2">
            	<input id="image" class="up_pic" type="file" value="选择图片" @change="uploadPic"/>
            	<span class="color">{{warning.pic}}</span>
            </div>
          </div>
          <div class="image-logo">
            <img id="imgShow" width="126px" height="112px" :src="cases.activityImgurl" />
          </div>
          <div class="yes-or-no">
            <input id="check" type="checkbox" checked="checked"/><span class="colors">{{warning.promit}}</span>
          </div>
          <div class="submit" @click="submit">提交</div>
          <!--<router-link tag="div" to="/ymMembersubmitmycase" class="submit">提交</router-link>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	import UE from '../components/ueditor.vue'
  export default {
  	components: {UE},
    name: "yingmoo-store",
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
      	defaultMsg:'',
      	config: {
          initialFrameWidth: 630,
          initialFrameHeight: 350
        },
        shos: 0,
        user:{},
        cases:{},
        addr:"http://172.16.10.52:8080/GetJson",
        warning:{
        	title:"*",
        	name:"*",
        	descript:null,
        	pic:"* 注：仅支持JPG,PNG,JPEG格式，文件小于5M",
        	promit:"我保证所上传的案例确实是通过本公司投放或者设计，如有侵权，我将承担一切版权纠纷责任。"
        },
        model: [{
          name: '媒体标题媒体标题媒体标题',
          where: '机场媒体',
          here: '灯箱',
          this: '北京',
          is: '海淀区',
          days: '1345元/天',
          num: '1'
        }, {
          name: '媒体标题媒体标题媒体标题',
          where: '机场媒体',
          here: '灯箱',
          this: '北京',
          is: '海淀区',
          days: '1345元/天',
          num: '2'
        }]
      }
    },
    mounted(){
	  	this.getUserInfo();
	  },
	  methods:{
	  	getUserInfo:function(){
	  		this.user = JSON.parse(localStorage.getItem("user"));
	  		var caseId = window.sessionStorage.getItem("caseId");
	  		if(caseId == null){return;}
	  		this.$http.post(this.requestAddr+"/GetJson/getCaseInfo",{"caseId":caseId},{emulateJSON:true}).then(
	  			(res)=>{
	  				this.cases = res.data.case;
	  				this.defaultMsg = this.cases.caseDescribe
	  			}
	  		)
	  	},
	  	uploadPic:function(){
	  		var file = document.getElementById("image").files[0];
				var formdata = new FormData();
				formdata.append("file",file);
				var reader = new FileReader();
				reader.readAsDataURL(file);
				this.$http.post(this.requestAddr+"/GetJson/uploadImage",formdata,{emulateJSON:true}).then(
					(res)=>{
						if(res.data.code==0){
							this.cases.activityImgurl = res.data.filepath;
							document.getElementById("imgShow").src = res.data.filepath;
						}
					}
				)
	  	},
	  	submit:function(){
	  		var content = this.getUEContent2();
	  		if(!this.validateForm()) return ;
	  		if(this.cases.id == null){
	  			this.cases.hitcount = 0
	  			this.cases.memberId = this.user.autoId;
	  			this.cases.flag = 1;
	  		}
	  		this.cases.caseDescribe = content;
	  		this.$http.post(this.requestAddr+"/GetJson/getMemberCorpInfo",{"memberId":this.user.autoId},{emulateJSON:true}).then(
	  			(res)=>{
	  				this.cases.memberName = res.data.memberCorp.contentName;
	  				this.cases.companyid = res.data.memberCorp.autoId;
	  				this.$http.post(this.addr+"/addMemberCase",this.cases,{emulateJSON:true}).then(
	  					(res)=>{
	  						this.$confirm(res.data.msg, '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'success' 
				        }).then(
				        	()=>{
				        		window.location.href = "../#/ymMembersubmitmycase";				        		
				        	}
				        )
	  					}
	  				)
	  			}
	  		)
	  		this.validateForm();
	  	},
	  	validateForm:function(){
	  		var flag = true;
	  		var check = document.getElementById("check")
	  		if(this.isEmpty(this.cases.caseTitle)){
	  			this.warning.title="* 案例标题不可为空!";
	  			flag = false;
	  		}
	  		if(this.isEmpty(this.cases.companyname)){
	  			this.warning.name = "* 请输入案例名称！"
	  			flag = false;
	  		}
	  		if(this.isEmpty(this.cases.activityImgurl)){
	  			this.warning.pic="* 请上传封面图片！"
	  			flag = false;
	  		}
	  		if(!check.checked){
	  			this.warning.promit = "* 请先勾选原创承诺"
	  			flag = false;
	  		}
	  		return flag;
	  	},
	  	isEmpty:function(param){
	  		if(param == null || (param).typeof == 'undefined' || (param).trim() == ''){
	  			return true;
	  		}
	  	},
	  	getUEContent2:function() {        
				let content = this.$refs.ue.getUEContent(); 
				/*this.$notify({
          title: '获取成功，可在控制台查看！',
          message: content,
          type: 'success'
        });*/
		  	return content;     
		  }
	  }
  }

</script>

<style scoped lang="less">
  .yingmoo-store {
    width: 100%;
    .nav {
      width: 1200px;
      height: 46px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      background-color: #f2f2f2;
      margin-top: 20px;
      li {
        list-style: none;
        width: 90px;
        height: 30px;
        margin: 0 20px;
        line-height: 30px;
        color: #666666;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          background-color: #036eb7;
          color: white;
        }
        &:nth-child(4) {
          background-color: #036eb7;
          color: white;
        }
      }
      .uploading {
        width: 103px;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
        color: #999999;
        text-align: center;
        margin-left: 560px;
        cursor: pointer;
        img {
          position: relative;
          top: 5px;
          margin-right: 10px;
        }
      }
    }
    .content {
      width: 1200px;
      background-color: white;
      padding-bottom: 44px;
      margin: 0 auto;
      h4 {
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        padding-left: 40px;
        padding-top: 40px;
      }
      .message {
        display: flex;
        .message-left {
          p {
            width: 145px;
            text-align: right;
            line-height: 60px;
            font-size: 12px;
            color: #333333;
            &:nth-child(1) {
              margin-top: 10px;
            }
            &:nth-child(4) {
              margin-top: 475px;
            }
            &:nth-child(5) {
              margin-top: 135px;
            }
          }
          .eleven {
            margin-top: 0 !important;
          }
        }
        .message-right {
          margin-left: 25px;
          .select{
            display: flex;
            align-items: center;
            margin-top: 10px;
            position: relative;
            div{
            	margin-top: 30px;
            }
            .pic1{
	        		width: 100px;
	        		height: 30px;
	        		position: absolute;
              top: 0;
	        		z-index: 0;
	        		background-color: #dddddd;
	        		color: #999999;
	        		text-align: center;
	        		line-height: 30px;
	        		border-radius: 3px;
	        		cursor: pointer;
	        	}
	        	.pic2{
	        		width: 400px;
	        		z-index: 1000;
	        		input{
	        			opacity: 0;
	        			width:100px;
	        			height: 30px;
	        			margin: 0;
	        		}
	        	}
            p{
              margin-top: 25px;
              .color{
                color: red;
                padding-right: 15px;
              }
            }
          }
          .one {
            .sel {
              width: 634px;
              margin-right: 0;
              color: #999999;
              padding-left: 10px;
            }
          }
          div {
            margin-top: 24px;
            .intro {
              width: 628px;
              height: 95px;
              font-size: 14px;
              outline: none;
              border-radius: 3px;
              border: 1px solid #dddddd;
            }
            input {
              width: 622px;
              height: 31px;
              padding-left: 10px;
              font-size: 14px;
              outline: none;
              border-radius: 3px;
              border: 1px solid #dddddd;
            }
            span {
              margin-left: 10px;
              color: #f29600;
              font-size: 12px;
            }
            select {
              width: 198px;
              height: 37px;
              margin-right: 15px;
              outline: none;
              border-radius: 3px;
              border: 1px solid #dddddd;
              color: #999999;
              padding-left: 10px;
              &:nth-child(3) {
                margin-right: 1px;
              }
            }
          }
          .image-logo {
            width: 126px;
            height: 112px;
            background-image:url("../assets/ym-member/count/imges.png");
            background-repeat: no-repeat;
            
          }
          .yes-or-no {
            height: 35px;
            font-size: 12px;
            color: #333333;
            line-height: 35px;
            input {
              width: 14px !important;
            }
            .no {
              margin-left: 30px;
            }
            span {
              color: #333333;
              margin-left: 0;
              position: relative;
              bottom: 10px;
            }
            .color {
              color: #f29600;
              line-height: 35px;
              margin-left: 100px;
            }
            .colors {
              color: #f29600;
            }
          }
          .submit {
            width: 103px;
            height: 30px;
            color: white;
            background-color: #f29600;
            text-align: center;
            line-height: 30px;
            border-radius: 7px;
            margin-top: 44px;
            cursor: pointer;
          }
        }
      }
    }
  }

</style>
